<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <select class="province">
        <!-- <option value="">请选择省份</option> -->
        <!-- <option value="A001">北京</option>
        <option value="A002">上海</option>
        <option value="A003">湖北</option>
        <option value="A004">湖南</option> -->
    </select>
    <select class="city" name="" id="">
        <option value="">请选择市/区</option>
        <!-- <option value="A001">朝阳</option>
        <option value="A002">海淀</option>
        <option value="A003">沙河</option>
        <option value="A004">上地</option> -->
    </select>
</body>
<script>

    // 1. 通过jax请求 获取对应的数据   =>  生成对应的省份option放到省份下拉框 (根据数据生成第一级 省份 )

    // 2. 省份下拉框切换时(onchange),   根据切换后的省份编号 -> 找到对应省份的数据  ->  找到其下 市/区  -> 生成第二级(市区下拉框)

    // 3. 市区下拉框切换时  -> 根据切换后的市的编号  ->    找到对应区(县级市)的数据 -> 生成  (直辖市和自治区 没有第三级)

    var proSel = document.getElementsByClassName("province")[0]
    var citySel = document.getElementsByClassName("city")[0]


    var xhr = new XMLHttpRequest(); // 0


    xhr.open("get", "../data/pro.json", true);  // 1

    xhr.send();  // 1

    xhr.onreadystatechange = function () {
        // 2 3 4
        if (xhr.readyState == 4 && xhr.status == 200) {

            var result = xhr.responseText;
            // console.log(result);

            result = JSON.parse(result);
            console.log(result);

            var { list: proList } = result;
            console.log(proList);

            // var html = '<option value="">请选择省份</option>';
            // proList.forEach(function (item) {
            //     var { city_id, city_name } = item;
            //     html += `<option value="${city_id}">${city_name}</option>`
            // })
            // proSel.innerHTML = html;

            // var html = '<option value="">请选择省份</option>';
            // proList.forEach(function ({ city_id, city_name } = item) {
            //     html += `<option value="${city_id}">${city_name}</option>`
            // })
            // proSel.innerHTML = html;

            // var html = '<option value="">请选择省份</option>';
            // proList.forEach(function ({ city_id, city_name }) {
            //     html += `<option value="${city_id}">${city_name}</option>`
            // })
            // proSel.innerHTML = html;

            // var html = '<option value="">请选择省份</option>';
            // proList.forEach(({ city_id, city_name }) => {
            //     return html += `<option value="${city_id}">${city_name}</option>`
            // })
            // proSel.innerHTML = html;

            var html = '<option value="">请选择省份</option>';
            proList.forEach(({ city_id, city_name }) => html += `<option value="${city_id}">${city_name}</option>`);
            proSel.innerHTML = html;


            proSel.onchange = function () {
                var cityId = this.value;
                console.log(cityId);

                if (cityId) {  //选择了省份 直辖市 自治区
                    // 对应cityId = > 从省份集合中找到 当前省份的数据
                    console.log(proList);

                    // filter()  将满足条件的数据放到新数组
                    // var thisPro = proList.filter((item) => {
                    //     var { city_id } = item;
                    //     return cityId === city_id;
                    // })[0];

                    // find()  返回第一条满足条件的数据
                    // var thisPro = proList.find((item) => {
                    //     var { city_id } = item;
                    //     return cityId === city_id;
                    // });

                    // var thisPro = proList.find(({ city_id }) => {
                    //     return cityId === city_id;
                    // });

                    var thisPro = proList.find(({ city_id }) => cityId === city_id);
                    console.log(thisPro);

                    var { list: cityList } = thisPro;


                    var html = '<option value="">请选择市/区</option>';
                    cityList.forEach(({ city_id, city_name }) => html += `<option value="${city_id}">${city_name}</option>`);
                    citySel.innerHTML = html;



                } else {
                    citySel.innerHTML = '<option value="">请选择市/区</option>';
                }
            }

        }
    }











</script>

</html>